/*
 * @Author: 韩富贵 hanxzi@163.com
 * @Date: 2022-08-17 19:09:12
 * @LastEditors: 韩富贵 hanxzi@163.com
 * @LastEditTime: 2022-09-12 17:13:50
 */
import React, {useEffect, useRef, useState} from 'react';
import ReactECharts from 'echarts-for-react';
import * as echarts from 'echarts';
import cloneDeep from 'lodash/cloneDeep';
import merge from 'lodash/merge';
import {isArray} from '@/utils/utils';

const defaultOption = {
    tooltip: {
        show: true,
    },
    textStyle: {
        fontFamily: '微软雅黑',
        fontSize: 16,
        fontWeight: 400,
    },
    legend: {
        show: false,
        textStyle: {
            color: '#FFFFFF',
        },
    },
    toolbox: {
        show: false,
    },
};

const defaultSeries = {
    type: 'pie',
    cursor: 'default',
    // hoverAnimation: false,
    legendHoverLink: false,
    label: {
        show: false,
        position: 'center',
    },
    emphasis: {
        label: {
            show: false,
        },
    },
};

const AgeRatioPie: React.FC<any> = (props) => {
    const [chartOption, setChartOption] = useState({});
    const {animate, series} = props;
    const timer = useRef<any>(null);

    // 自动播放动画循环
    const autoAownplay = (chart: any) => {
        if (animate == false) {
            return;
        }
        const mychart = chart;
        const dataLength = series[0].data.length;
        let dataIndex = 0;

        if (dataLength > 0) {
            const start = () => {
                timer.current = setInterval(function () {
                    mychart.dispatchAction({
                        type: 'hideTip',
                        seriesIndex: 0,
                        dataIndex: dataIndex,
                    });
                    // 显示提示框
                    mychart.dispatchAction({
                        type: 'showTip',
                        seriesIndex: 0,
                        dataIndex: dataIndex,
                    });
                    // 取消高亮指定的数据图形
                    mychart.dispatchAction({
                        type: 'downplay',
                        seriesIndex: 0,
                        dataIndex: dataIndex === 0 ? dataLength - 1 : dataIndex - 1,
                    });
                    mychart.dispatchAction({
                        type: 'highlight',
                        seriesIndex: 0,
                        dataIndex: dataIndex,
                    });
                    dataIndex++;
                    if (dataIndex >= dataLength) {
                        dataIndex = 0;
                    }
                }, 2000);
            };

            start();
            mychart.on('mouseover', () => {
                clearInterval(timer.current);
                timer.current = () => {
                };
                mychart.dispatchAction({
                    type: 'hideTip',
                    seriesIndex: 0,
                    dataIndex: dataIndex,
                });
                mychart.dispatchAction({
                    type: 'downplay',
                    seriesIndex: 0,
                    dataIndex: dataIndex === 0 ? dataLength - 1 : dataIndex - 1,
                });
                dataIndex = -1;
            });

            mychart.on('mouseout', () => {
                start();
            });
        }
    };

    const resolveData = () => {
        let series = [];
        let option: any = {};
        if (isArray(props.series)) {
            series = props.series.map((item: any) => merge({}, defaultSeries, item));
        }
        const defaultOptionCopy = cloneDeep(defaultOption);
        option = merge({}, defaultOptionCopy, props.option);
        option.series = series;
        setChartOption(option);
    };

    const getOption = () => {
        return cloneDeep(chartOption);
    };

    useEffect(() => {
        resolveData();
        return () => {
            clearInterval(timer.current);
        };
    }, [props.refreshLoading]);

    useEffect(() => {
        return () => {
            clearInterval(timer.current);
        };
    }, []);

    return (
        <ReactECharts
            onChartReady={(chart) => autoAownplay(chart)}
            echarts={echarts}
            option={getOption()}
            style={{height: '100%', width: '100%'}}
        />
    );
};

export default AgeRatioPie;
